<template>
  <div id='wrap'>
    <h1>props+slot案例</h1>
    <div class="group1">
        <scu19 :chide :slist="list">
            <template #gridBoxItem="{item}">
                <div>
                    <h4>{{ item.title }}</h4>
                    <p>{{ item.descript }}</p>
                </div>
            </template>
        </scu19>
    </div>
  </div>
</template>

<script lang='ts'>
export default {
  name: 'scu24',
}
</script>

<script lang='ts' setup>
import { ref,onMounted,provide, type Ref } from 'vue'
import { type IDdemoList } from "@/service/types/scu24Types";
import { getList } from "@/service/day20241226/scu24Data";
import scu19 from "./component/scu19.vue";
import { myInjectionKey } from "./component/keys";
const chide=ref('蛋糕')
const list=ref<IDdemoList[]>([])
onMounted(async()=>{
    list.value=await getList()
})
const heshibi=ref('爷爷传的和氏璧')
provide<{heshibi:Ref<string>}>(myInjectionKey,{heshibi})
provide('foo',{name:'米米'})
</script>

<style scoped lang='scss'>
.group1{
    border: 2px solid rgb(203,50,175);
    margin: 10px;
    padding: 10px;
}
</style>